-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Theme switching ESLint rules #32569
Theme switching ESLint rules #32569
Conversation
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
@marcaaron Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You'll want to also update paths in the tests folder for JEST
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM apart from the style issues
Merged changes from #32498 in order to properly update the ESLint rules. Let's merge the other PR first |
5833ce7
to
8aa81be
Compare
This comment was marked as outdated.
This comment was marked as outdated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, I think we can create another issue to handle the font case separately from StyleUtils but the lint rule logic preventing util imports makes sense to me!
Does this require C+ review based on #32569 (comment)? |
@@ -488,7 +488,7 @@ describe('Unread Indicators', () => { | |||
const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); | |||
const displayNameTexts = screen.queryAllByLabelText(hintText); | |||
expect(displayNameTexts).toHaveLength(1); | |||
expect(lodashGet(displayNameTexts[0], ['props', 'style', 'fontWeight'])).toBe(fontWeightBold); | |||
expect(lodashGet(displayNameTexts[0], ['props', 'style', 'fontWeight'])).toBe(FontUtils.fontWeight.bold); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you add some QA steps that cover the font changes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did. Is that not enough?
Same as in Tests.
Additionally:
- Check that there are no console errors on all platforms
- Check that fonts look as expected (no font changes)
@situchan if you're able to finish the checklist today, I can add you as C+. Otherwise, I'll finish it internally. |
I can finish in an hour |
Code looks good. Reviewed the whole diff. |
Reviewer Checklist
Screenshots/VideosAndroid: Nativeandroid.movAndroid: mWeb Chromemchrome.moviOS: Nativeios.moviOS: mWeb Safarimsafari.movMacOS: Chrome / Safariweb.movMacOS: Desktopdesktop.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NAB: any reason for capitalizing the first character in FontUtils
, while all others are lowercased?
Ah reviewer checklist is failing here. Missing 3 new checklist items |
We removed usages of any other "style utils", so there is only the So yes, this is by design :) |
@situchan I think your checklist might be out of date |
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeiOS: NativeiOS: mWeb SafariMacOS: Chrome / SafariMacOS: Desktop |
Not sure what's up with the review checklist, but NAB gonna merge |
@grgia #32569 (comment) was the issue, so I commented here 🙂 This PR has now 3 reviewer checklists 😄 |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
@situchan it did not pass with any of those |
🚀 Deployed to staging by https://github.com/grgia in version: 1.4.23-0 🚀
|
🚀 Deployed to production by https://github.com/thienlnam in version: 1.4.23-4 🚀
|
@grgia
Details
Add ESLint rules to enforce using the theme switching hooks and HOCs. Also move theme color files to
@styles/theme/themes
, so that we don't have to adapt ESLint rules once there are new themes coming.Fixed Issues
$ #21671
$ #29911
PROPOSAL:
Tests
(We mostly changed code imports in this PR, so functionality shouldn't be affected)
Offline tests
QA Steps
Same as in Tests.
Additionally:
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop